<template>
    <card>
        <p slot="title">
            <Icon type="compose"></Icon>
            患者信息
        </p>
        <Form ref="formItem" :model="formItem" :rules="ruleForm" :label-width="120">
            <Row type="flex">
                <Col :span="6">
                    <FormItem label="患者昵称：">
                        <Input v-model="formItem.nickName" size="large" placeholder="请填写内容...">
                            <Icon type="information-circled" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="患者姓名：" prop="name">
                        <Input v-model="formItem.name" size="large" placeholder="请填写内容...">
                            <Icon type="information-circled" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="性别：" prop="sex">
                        <Select v-model="formItem.sex" size="large" style="width:100%">
                            <Option value="1" key="1">男</Option>
                            <Option value="2" key="2">女</Option>
                        </Select>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="出生日期：">
                        <DatePicker v-model="formItem.birthday" size="large" type="date" placeholder="请选择出生日期" style="width: 100%"></DatePicker>
                    </FormItem>
                </Col>
            </Row>
            <Row type="flex">
                <Col :span="6">
                    <FormItem label="手机号码：" prop="phone">
                        <Input v-model="formItem.phone" size="large" placeholder="请填写内容...">
                            <Icon type="information-circled" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="QQ号码：">
                        <Input v-model="formItem.qq" size="large" placeholder="请填写内容...">
                            <Icon type="information-circled" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="微信号码：">
                        <Input v-model="formItem.wechat" size="large" placeholder="请填写内容...">
                            <Icon type="information-circled" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
                <Col :span="6">
                    <FormItem label="个人邮箱：">
                        <Input v-model="formItem.email" size="large" placeholder="请填写内容...">
                            <Icon type="ios-email-outline" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
            </Row>
            <Row>
                <Col :span="12">
                    <FormItem label="现居住地：">
                        <Input v-model="formItem.address" size="large" placeholder="请填写内容...">
                            <Icon type="home" slot="prepend"></Icon>
                        </Input>
                    </FormItem>
                </Col>
            </Row>
            <Row type="flex">
                <Col :span="12">
                    <FormItem>
                        <Button @click="save" size="large" type="primary">保存</Button>
                        <Button @click="close" size="large" type="ghost" style="margin-left: 8px">关闭</Button>
                    </FormItem>
                </Col>
            </Row>
        </Form>
    </card>
</template>

<script>
export default {
    data () {
        const validatePhone = (rule, value, callback) => {
            if (value !== '') {
                let url = '/user/patient/checkPhone/' + value
                this.$ajax.get(url).then((response) => {
                    let {code, data, msg} = response.data
                    if (code === 0) {
                        if (data) {
                            callback(new Error('手机号码已存在'));
                        } else {
                            callback();
                        }
                    } else {
                        this.$bus.alert('error', msg)
                    }
                })
            } else {
                callback();
            }
        };
        return {
            baseURL: '/user/patient',
            formItem: {
                name: '',
                nickName: '',
                sex: '',
                birthday: '',
                phone: '',
                wechat: '',
                address: ''
            },
            ruleForm: {
                name: [
                    { required: true, message: '请填写患者名称', trigger: 'change' }
                ],
                sex: [
                    { required: true, message: '请选择患者性别', trigger: 'change' }
                ],
                phone: [
                    { validator: validatePhone, trigger: 'blur' }
                ]
            }
        }
    },
    methods:{
        init () {
            this.$bus.init(this.formItem)
            this.resetForm()
        },
        save () {
            this.$refs['formItem'].validate((valid) => {
                if (valid) {
                    let url = this.baseURL + '/saveOrUpdate'
                    this.$ajax.post(url, this.formItem).then(function (response) {
                        let {code} = response.data
                        if (code === 0) {
                            this.$bus.alert('success', '保存成功', 3)
                            this.init()
                        }
                    }.bind(this))
                }
            })
        },
        close () {

        },
        resetForm () {
            this.$refs.formItem.resetFields()
        }
    },
    beforeRouteEnter (to, from, next) {
        next(vm => {
            vm.init()
        })
    },
    beforeRouteLeave (to, from , next) {
        this.$bus.routeLeave(next, this.selectTabPane)
    }
}
</script>

<style>

</style>
